<template>
    <section>
        <div class="main" @click="hiddenCart">
            <div :class="{'shadow':showShadow}"></div>
            <comeback :getURL="goType"></comeback>
            <div class="image">
                <div class="good-img">
                    <img :src="imgSrc">
                    <div class="title">{{goods.title}}</div>
                </div>
                <!-- 缩略图 -->
                <div class="img_small">
                    <span v-for="(img,index) of goods.imgs" :class="{'active':index===mark}" @click="change(img,index)" :key="index">
                        <img :src="img">
                    </span>
                </div>
                <!-- <div class="goods-info">
                    <span class="price red">￥{{goods.price}}</span>
                </div> -->
            </div>
            <div class="content">
                <div class="commodity-info">商品信息</div>
                <div class="detail">
                    <div class="detail-info">
                        <div>
                            <span class="detail-title">名称：{{goods.name}}</span>
                            <span></span>
                        </div>
                        <div>
                            <span class="detail-title">规格：{{goods.specifications}}</span>
                            <span></span>
                        </div>
                        <div>
                            <span class="detail-title">信息：{{goods.information}}</span>
                            <span></span>
                        </div>
                    </div>
                    <div class="detail-img" v-for="(img,index) of goods.bigimg" :key="index">
                        <img :src="img" v-preview="img">
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <dl class="buy">
            <dd class="buynow" @click="recive">立即领取</dd>
        </dl>
        <lg-preview></lg-preview>
    </section>
</template>
<script>
    import comeback from '../../components/comeback.vue'
    import { userInfoGet, WXShare } from '../../libs/publicMethod'
    import { getClassifyInfos, isBuyThisWeek, isThisWeekClaimMask } from '../../libs/interface'
    export default {
        components: { comeback, userInfoGet, WXShare, getClassifyInfos, isBuyThisWeek, isThisWeekClaimMask },
        data() {
            return {
                userInfo: userInfoGet(),
                goType: '/receiveGoodses',
                showShadow: false,  //点击购物车显示阴影
                mark: 0,            //缩略图下标
                imgSrc: '',         //商品图片
                goods: {
                    // id: '',
                    title: '',
                    price: '',
                    name: '',
                    specifications: '',
                    skuid: '',
                    information: '',
                    imgs: [],
                    bigimg: []
                }
                
            }
        },
        methods: {
            change(i, m) {
                this.imgSrc = i
                this.mark = m
            },
            hiddenCart() {
                this.isShow = false
                this.showShadow = false
            },
            recive () {
                let vm = this
                // sessionStorage.setItem('receiveGoods', JSON.stringify({ receive: true }))
                // vm.$router.push('/faciaMaskPay/' + vm.goods.skuid)
                let params = {
                    memberId: vm.userInfo.id
                }
                isBuyThisWeek(params, (data) => {
                    if (data.code === 1) {
                        if (data.payload) {
                            vm.$toast('领取礼品从下周开始')
                        } else {
                            let param = {
                                memberId: vm.userInfo.id
                            }
                            isThisWeekClaimMask(param, (data) => {
                                if (data.code === 1) {
                                    if (data.payload) {
                                        vm.$toast('本周已领取，请于下周继续')
                                    } else {
                                        sessionStorage.setItem('receiveGoods', JSON.stringify({ receive: true }))
                                        // vm.$router.push('/faciaMaskPay/' + vm.goods.skuid)
                                        location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2FfaciaMaskPay%2F' + vm.goods.skuid + '&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect'
                                    }
                                } else {
                                    vm.$toast('暂未请求到数据,请稍后再试')
                                }
                            })
                        }
                    } else {
                        vm.$toast('暂未请求到数据,请稍后再试')
                    }
                })
            }
        },
        mounted() {
            let vm = this
            document.body.style.paddingBottom = '47px'
            var Sdata = {                                                          //分享请求配置
                gotoPage: '/facialMask',
                //邀请者链接         
                inviterID: vm.userInfo.id,                                              //链接带的参数
                type: 1,
                desc: '买一盒送两年，众多好礼周周领，邀好友参与还有奖励哦。',
                //链接图片（小图）     
                imgUrl: '',
                //邀请话
                shareTitle: '【' + vm.userInfo.nick + '】' + '邀您参与乐销商城好礼周周领活动',
            }
            WXShare.topShare(Sdata)
            let params = {
                productId: vm.$route.params.id,
                memberId: vm.userInfo.id
            }
            getClassifyInfos(params, (data) => {
                if (data.code === 1) {
                    vm.goods.title = data.payload.product.name
                    vm.goods.price = data.payload.product.defaultPrice / 100
                    vm.goods.bigimg = data.payload.sku.bigimg.split(',')
                    vm.goods.imgs = data.payload.product.banner.split(',')
                    vm.imgSrc = vm.goods.imgs[0]
                    vm.goods.skuid = data.payload.product.skuInfos[0].skuId
                    vm.goods.name = data.payload.product.name
                    for (let obj of data.payload.product.skuInfos) {
                        vm.goods.specifications += obj.skuName + ' '
                    }
                    vm.goods.information = data.payload.sku.skuProperties
                } else {
                    vm.$toast('暂未请求到数据,请稍后再试')
                }
            })
        },
    }
</script>
<style scoped>
.shadow{
    width: 100%;
    height: 100%;
    z-index: 7;
    position: fixed;
    background-color: rgba(0,0,0,.5)
}
.image{
    background-color: #fff;
}
.good-img{
    width: 100%;
    /* height: 21rem; */
    height: 18rem;
    position: relative;
}
.good-img img{
    width: 100%;
    height: 100%;
}
/* .image dd{
    position: relative;
} */
.title{
    background: rgba(45, 45, 45, .7);
    color: #fff;
    height: 2.5rem;
    line-height: 2.5rem;
    position: absolute;
    width: 96%;
    bottom: 0;
    font-size: .8rem;
    text-align: left;
    padding-left: 4%;
}
.img_small{
    display: flex;
    justify-content: center;
    white-space: nowrap;
    overflow: auto;
}
.img_small span{
    display: inline-block;
    width: 4rem;
    height: 3rem;
    margin: .2rem;
    border: 1px solid #fff;
    box-sizing: border-box;
}
.img_small img{
    width: 100%;
    height: 100%;
}
.img_small .active{
    border: 1px solid #C91F16;
}
.goods-info{
    display: flex;
    justify-content: space-around;
}
.goods-info span{
    display: inline-block;
    color: #333;
    font-size: .8rem;
}
.goods-info .red{
    color: #C91F16;
}
.goods-info>span{
    margin: .3rem 0;
}
.content{
    margin-top: .6rem;
    background-color: #fff;
    text-align: left;
}
.commodity-info{
    height: 2.2rem;
    line-height: 2.5rem;
    margin: 0 1rem;
    font-size: .8rem;
    border-bottom: 1px solid #DEDEDE;
}
.detail-info{
    padding-top: .7rem;
    font-size: .7rem;
    line-height: 1.4rem;
    color: #333;
    margin: 0 .8rem;
}
.detail-title{
    font-weight: bold;
}
.detail-img{
    width: 100%;
    display: inline-block;
    margin-top: .8rem;
    text-align: center;
}
.detail-img img{
    width: 94%;
    height: 100%;
    border-radius: 1rem;
    -moz-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    -webkit-box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
    box-shadow: 0rem 1rem 2.5rem 0rem rgba(185,182,168,0.5); 
}
.buy{
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
}
.buynow{
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: linear-gradient(0deg,rgba(226,35,25,1),rgba(253,55,8,1));
    -moz-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    -webkit-box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    box-shadow: 0rem -2rem 5rem 0rem rgba(179,177,171,0.2);
    color: #fff;
    font-size: 1.05rem;
}
</style>